<template>
  <div class="search">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="props.labelWidth">
      <el-row>
        <template v-for="item in props.formItems" :key="item.label">
          <el-col v-bind="props.colLayout">
            <el-form-item :label="item.label" :prop="item.field">
              <template
                v-if="item.type === 'input' || item.type === 'password'"
              >
                <el-input
                  :show-password="item.type == 'password'"
                  :placeholder="item.placeholder"
                  v-model="formData[`${item.field}`]"
                  maxlength="200"
                  @keyup.enter.native="
                    handleQuery(item.field, formData[`${item.field}`])
                  "
                  clearable
                ></el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  :placeholder="item.placeholder"
                  v-model="formData[`${item.field}`]"
                  clearable
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>
              </template>
              <template v-else-if="item.type === 'cascader'">
                <el-cascader
                  v-model="formData[`${item.field}`]"
                  :options="item.options"
                  :show-all-levels="false"
                  :placeholder="item.placeholder"
                  clearable
                />
              </template>
              <template v-else-if="item.type === 'date'">
                <el-date-picker
                  v-model="formData[`${item.field}`]"
                  type="date"
                  range-separator="至"
                  :placeholder="item.placeholder"
                  end-placeholder="End date"
                  clearable
                  value-format="YYYY-MM-DD"
                />
              </template>
              <template v-else-if="item.type === 'daterange'">
                <el-date-picker
                  v-model="formData[`${item.field}`]"
                  type="daterange"
                  range-separator=""
                  start-placeholder="日期"
                  :placeholder="item.placeholder"
                  end-placeholder=""
                  clearable
                  value-format="YYYY-MM-DD"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
        <el-col v-bind="props.colLayout" v-if="!props.flexWrap">
          <slot name="footer"></slot>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer" v-if="props.flexWrap">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
    
<script setup >
import { ref, watch } from 'vue'
const emits = defineEmits(['update:modelValue', 'handleQuery'])
const props = defineProps({
  // 双向绑定
  modelValue: {
    type: Object,
    required: true,
  },
  // 组件数据
  formItems: {
    type: Array,
    default: () => [],
  },
  //  label宽度
  labelWidth: {
    type: String,
    default: '80px',
  },
  // 用于响应式
  colLayout: {
    type: Object,
    default: () => ({
      xl: 4,
      lg: 6,
      md: 8,
      xs: 24,
    }),
  },
  flexWrap: {
    type: Boolean,
    default: false,
  },
})

// 搜索按钮事件
const handleQuery = (field, value) => {
  emits('handleQueryClick', { [field]: value })
}
// 这里选择里办法一进行实现
// 办法1：获取值：{ ...props.modelValue} 进行浅拷贝，避免破坏props单向数据流,
// v-model="formData[`${item.field}`]"
const formData = ref({ ...props.modelValue })


props.formItems.map((item) => {
  if (item.defaultValue) {
    formData.value[item.field] = item.defaultValue
  }
})


// 办法2：使用computed，需要把组件中的v-model 改成 :model-value="modleValue[`${item.field}`]"  和 @update:modelValue='handleValueChange($event,item.field)'

// 同时需要把 值更新：结构props.modelValue，[field]:value则实现值替换
//const handleValueChange=(value,field)=>{ emits("update:modelValue",{...props.modelValue,[field]:value}) }
// const formData = computed(() => ({ ...props.modelValue }));
// 进行深度监听,实现组件双向绑定
watch(
  formData,
  (newValue) => {
    emits('update:modelValue', newValue)
  },
  {
    deep: true,
  }
)
</script>
    
<style scoped >
.header {
  text-align: center;
}
</style>
